<template>
  <div class="main-content">
    <div class="main-market-data">
      <div class="main-box" v-for="(item, index) in main_data" :key="index">
        <el-card class="main-radio-data">
          <i class="main-icon iconfont" :class="item.icon" :style="item.color" ></i>
        <div class="main-data">
          <p class="main-data-title">{{ item.title }}</p>
          <span>{{ item.data }}</span>
        </div></el-card>
      </div>
    </div>
    <el-card><div class="main-data-list" id="chart">数据</div></el-card>
  </div>
</template>

<script>
import {totaldata} from '@/apis/echart'
import * as echarts from 'echarts';
export default {
  data() {
    return {
      main_data: [
        {
          icon: "icon-tuanduicankaoxian-",
          title: "总订单",
          data: "11120",
          color: "color:#60B8E6",
        },
        {
          icon: "icon-qian",
          title: "总销售额",
          data: "11120",
          color: "color:#D4237A",
        },
        {
          icon: "icon-dingdan",
          title: "今日订单数",
          data: "11120",
          color: "color:#1296DB",
        },
        {
          icon: "icon-money",
          title: "今日销售额",
          data: "11120",
          color: "color:#64FB6D",
        },
      ],
      todayOrder:0,  //总订单
      totalAmount:0,  //总销售额
      totalOrder:0,  //今日订单
      totayAmount:0,  //今日销售额

    };
  },
  mounted(){
    //获取后台数据
    totaldata().then(res=>{
    let data= [res.data.todayOrder,res.data.totalAmount,res.data.totalOrder,res.data.totayAmount];
    for(let i=0;i<this.main_data.length;i++){
      this.main_data[i].data=data[i]
    }
   let myChart = echarts.init(document.getElementById('chart'));
      myChart.setOption({
        title: {
        text: '店铺数据'
         },
        tooltip: {
        trigger: 'axis'
        },
        legend: {
        data: ['订单数据', '金额数据']
        },
        grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
        },
        toolbox: {
        feature: {
            saveAsImage: {}
        }
        },
        xAxis: {
        type: 'category',
        boundaryGap: false,
        data: res.data.xData
        },
        yAxis: {
        type: 'value'
        },
        series: [
        {
            name: '订单数据',
            type: 'line',
            stack: '总量',
            data: res.data.orderData
        },
        {
            name: '金额数据',
            type: 'line',
            stack: '总量',
            data: res.data.amountData
        }
    ]
});
    })


    //初始化echarts
   
  }
};
</script>

<style lang="less" scoped>
// .main-content {
//   margin: 0 auto;
//   padding: 20px;
// }
.main-box {
  background: #fff;
  width: 300px;
  display: flex;
}
.main-market-data {
  width: 96%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  margin-bottom: 60px;
  margin-top: 20px;
}
.main-icon {
  font-size: 60px;
  font-weight: 200;
  line-height: 100px;
}
.main-data {
  width: 100px;
  display: inline-block;
  margin-left: 60px;
  span{
    width: 100px;
  }
}
.main-data-title {
  width: 100px;
  color: #ccc;
}
.main-data-list {
  width:100%;
  height: 300px;
  background: #fff;
}
.main-radio-data{
  width: 95%;
  display: flex;
  justify-content: space-between;
}
.main-radio{
  width: 100%;
  display: flex;
  justify-content: space-between;
}
// .main-data-box{
//   width: 96%;
//   margin: 0 auto;
// }
.main-radio-data .el-card__body{
  width: 100% !important;
}
</style>